<template>
    <div>
        <slot/>
        <div class="bookshelf">
            <ul>
                <li v-for="it in myBooksList" :key="it.title" @click="path(it)">
                    <img :src="it.src">
                    <p>{{it.title}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import MockService from "../../apis/Ajax";
    export default {
        data() {
            return {
                myBooksList:[]
            }
        },
        async created(){
            let userName=sessionStorage.getItem('userName')
            let result = await MockService.user(userName)
            if(result.code === 200){
                this.myBooksList = result.data.books
            }
            console.log(this.myBooksList);
        },
        methods:{
            path(it){
                var obj2 = {
                author: it.author,
                src: it.src,
                title: it.title,
                price: it.price,
                press: it.press,
                name: it.name,
            };
                sessionStorage.setItem("more", JSON.stringify(obj2));
                this.$router.push("/more");
            }
        }
    }
</script>
<style lang="less" scoped>
    .bookshelf{
        height: calc(100%-369px);
        overflow-x: hidden;
        > ul{
            padding-top: 20px;
            display: flex;
            flex-wrap:wrap ;
            flex: 1;
            justify-content: space-around;
            align-items: stretch;
                & :nth-child(3n){
                    border-right: none;
                }
                & :nth-child(n+4){
                    border-top: 2px solid rgb(202, 200, 200);
                }
            > li{
                text-align: center;
                width: 30%;
                border-right: 2px solid rgb(202, 200, 200);
                padding: 5px 5px;
                > img{
                    margin-top:20px ;
                    width: 100px;
                }
                > p{
                    display: block;
                    color: #616060;
                    font-size: 11px;
                    line-height: 20px;
                    text-indent: 16px;
                    width: 100%;
                    height: 40px;
                    overflow: hidden;
                }
            }
        }
    }
</style>